<template>
  <div class="dashboard-container">
    <!-- 顶部数据卡片 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :xs="12" :sm="6" v-for="(item, index) in statistics" :key="item.title">
        <el-card
          shadow="hover"
          :body-style="{ padding: '20px' }"
          class="data-card"
          :style="{ animationDelay: `${index * 0.1}s` }"
        >
          <div class="card-content">
            <div class="icon-wrapper" :class="item.type">
              <el-icon><component :is="item.icon" /></el-icon>
            </div>
            <div class="data-wrapper">
              <count-to
                :start-val="0"
                :end-val="item.value"
                :duration="2000"
                class="card-value"
              />
              <div class="card-title">{{ item.title }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 主内容区 -->
    <el-row :gutter="20" class="main-content">
      <!-- 左侧内容 -->
      <el-col :xs="24" :lg="16" class="left-content">
        <!-- 项目展示 -->
        <el-card shadow="hover" class="section-card project-card">
          <template #header>
            <div class="card-header">
              <span class="header-title">
                <el-icon class="header-icon"><FolderOpened /></el-icon>
                我的项目
              </span>
            </div>
          </template>
          <div class="project-grid">
            <div
              v-for="(project, index) in projects"
              :key="project.id"
              class="project-item"
              :style="{ animationDelay: `${index * 0.1}s` }"
            >
              <div class="project-cover">
                <img :src="project.cover" :alt="project.name" />
                <div class="project-overlay">
                  <el-button type="primary" circle>
                    <el-icon><View /></el-icon>
                  </el-button>
                </div>
              </div>
              <div class="project-info">
                <h4 class="project-name">{{ project.name }}</h4>
                <p class="project-desc">{{ project.description }}</p>
                <div class="project-meta">
                  <div class="meta-item">
                    <el-avatar :size="24" :src="project.avatar" />
                    <span>{{ project.author }}</span>
                  </div>
                  <div class="meta-item time">
                    <el-icon><Clock /></el-icon>
                    <span>{{ project.time }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-card>

        <!-- 最新动态 -->
        <el-card shadow="hover" class="section-card activity-card">
          <template #header>
            <div class="card-header">
              <span class="header-title">
                <el-icon class="header-icon"><BellFilled /></el-icon>
                最新动态
              </span>
            </div>
          </template>
          <div class="activity-list">
            <div
              v-for="(activity, index) in activities"
              :key="activity.id"
              class="activity-item"
              :style="{ animationDelay: `${index * 0.05}s` }"
            >
              <el-avatar :size="40" :src="activity.avatar" class="activity-avatar" />
              <div class="activity-content">
                <div class="activity-text">{{ activity.content }}</div>
                <div class="activity-time">{{ activity.time }}</div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 右侧内容 -->
      <el-col :xs="24" :lg="8" class="right-content">
        <!-- 快捷导航 -->
        <el-card shadow="hover" class="section-card quick-nav-card">
          <template #header>
            <div class="card-header">
              <span class="header-title">
                <el-icon class="header-icon"><Grid /></el-icon>
                快捷导航
              </span>
            </div>
          </template>
          <div class="quick-nav-grid">
            <div
              v-for="(nav, index) in quickNavs"
              :key="nav.id"
              class="nav-item"
              :style="{ animationDelay: `${index * 0.08}s` }"
              @click="handleNavClick(nav)"
            >
              <div class="nav-icon" :style="{ background: nav.color }">
                <el-icon><component :is="nav.icon" /></el-icon>
              </div>
              <div class="nav-name">{{ nav.name }}</div>
            </div>
          </div>
        </el-card>

        <!-- 翻页时钟 -->
        <el-card shadow="hover" class="section-card clock-card">
          <div class="flip-clock">
            <div class="clock-item">
              <div class="flip-number" :key="time.hours">
                {{ formatNumber(time.hours) }}
              </div>
              <div class="clock-label">时</div>
            </div>
            <div class="clock-separator">:</div>
            <div class="clock-item">
              <div class="flip-number" :key="time.minutes">
                {{ formatNumber(time.minutes) }}
              </div>
              <div class="clock-label">分</div>
            </div>
            <div class="clock-separator">:</div>
            <div class="clock-item">
              <div class="flip-number flip-animation" :key="time.seconds">
                {{ formatNumber(time.seconds) }}
              </div>
              <div class="clock-label">秒</div>
            </div>
          </div>
        </el-card>

        <!-- 努力工作 -->
        <el-card shadow="hover" class="section-card work-card">
          <div class="work-image">
            <img :src="workImageUrl" alt="努力工作" />
            <!-- 动态装饰元素 -->
            <div class="floating-particles">
              <div v-for="i in 6" :key="i" class="particle" :style="{ animationDelay: `${i * 0.5}s` }"></div>
            </div>
          </div>
        </el-card>
        <!-- 项目信息 -->
        <el-card shadow="hover" class="section-card chart-card">
          <template #header>
            <div class="card-header">
              <span class="header-title">
                <el-icon class="header-icon"><TrendCharts /></el-icon>
                项目信息
              </span>
            </div>
          </template>
            <div id="osc-gitee-widget-tag"></div>
        </el-card>
        <!-- 访问统计 -->
        <el-card shadow="hover" class="section-card chart-card">
          <template #header>
            <div class="card-header">
              <span class="header-title">
                <el-icon class="header-icon"><TrendCharts /></el-icon>
                访问统计
              </span>
            </div>
          </template>
          <div ref="lineChartRef" class="chart"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts'
import type { EChartsOption } from 'echarts'
import {
  Document,
  Collection,
  ChatLineRound,
  View,
  FolderOpened,
  BellFilled,
  Grid,
  TrendCharts,
  Clock,
  User,
  Setting,
  DataAnalysis,
  Files,
  Notification,
  Monitor
} from '@element-plus/icons-vue'
import CountTo from '@/views/dashboard/components/CountTo.vue'
import { useSettingsStore } from '@/store/modules/settings'
import { useRouter } from 'vue-router'

const router = useRouter()
const settingsStore = useSettingsStore()

const icons = {
  Document: markRaw(Document),
  Collection: markRaw(Collection),
  ChatLineRound: markRaw(ChatLineRound),
  View: markRaw(View),
  FolderOpened: markRaw(FolderOpened),
  BellFilled: markRaw(BellFilled),
  Grid: markRaw(Grid),
  TrendCharts: markRaw(TrendCharts),
  Clock: markRaw(Clock),
  User: markRaw(User),
  Setting: markRaw(Setting),
  DataAnalysis: markRaw(DataAnalysis),
  Files: markRaw(Files),
  Notification: markRaw(Notification),
  Monitor: markRaw(Monitor)
}

// 顶部统计数据
const statistics = ref([
  {
    title: '文章总数',
    value: 156,
    type: 'primary',
    icon: icons.Document
  },
  {
    title: '用户总数',
    value: 2854,
    type: 'success',
    icon: icons.Collection
  },
  {
    title: '留言总数',
    value: 1264,
    type: 'warning',
    icon: icons.ChatLineRound
  },
  {
    title: '访问量',
    value: 12574,
    type: 'info',
    icon: icons.View
  }
])

// 项目数据
const projects = ref([
  {
    id: 1,
    name: 'Smart Admin',
    description: '基于 Vue3 + Element Plus 的后台管理系统',
    cover: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=400',
    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=1',
    author: '张三',
    time: '2小时前'
  },
  {
    id: 2,
    name: '数据分析平台',
    description: '企业级大数据分析和可视化平台',
    cover: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=400',
    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=2',
    author: '李四',
    time: '5小时前'
  },
  {
    id: 3,
    name: '电商系统',
    description: '支持多租户的电商解决方案',
    cover: 'https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=400',
    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=3',
    author: '王五',
    time: '1天前'
  },
  {
    id: 4,
    name: 'CRM系统',
    description: '客户关系管理系统',
    cover: 'https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?w=400',
    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=4',
    author: '赵六',
    time: '2天前'
  },
  {
    id: 5,
    name: 'OA办公系统',
    description: '智能化办公自动化平台',
    cover: 'https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?w=400',
    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=5',
    author: '孙七',
    time: '3天前'
  },
  {
    id: 6,
    name: '在线教育平台',
    description: '互动式在线学习系统',
    cover: 'https://images.unsplash.com/photo-1501504905252-473c47e087f8?w=400',
    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=6',
    author: '周八',
    time: '5天前'
  }
])

// 最新动态
const activities = ref([
  {
    id: 1,
    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=a1',
    content: '张三 提交了新的代码到 Smart Admin 项目',
    time: '刚刚'
  },
  {
    id: 2,
    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=a2',
    content: '李四 在数据分析平台创建了新的报表',
    time: '10分钟前'
  },
  {
    id: 3,
    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=a3',
    content: '王五 完成了电商系统的支付模块开发',
    time: '30分钟前'
  },
  {
    id: 4,
    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=a4',
    content: '赵六 评论了你的文章《Vue3 最佳实践》',
    time: '1小时前'
  },
  {
    id: 5,
    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=a5',
    content: '孙七 更新了 OA办公系统的需求文档',
    time: '2小时前'
  },
  {
    id: 6,
    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=a6',
    content: '周八 发布了新版本 v2.0.0',
    time: '3小时前'
  }
])

// 快捷导航
const quickNavs = ref([
  {
    id: 1,
    name: '用户管理',
    icon: icons.User,
    color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
    path: '/system/user'
  },
  {
    id: 2,
    name: '存储配置',
    icon: icons.Setting,
    color: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
    path: '/file/setting'
  },
  {
    id: 3,
    name: '缓存监控',
    icon: icons.DataAnalysis,
    color: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
    path: '/monitor/cache'
  },
  {
    id: 4,
    name: '在线开发',
    icon: icons.Files,
    color: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
    path: '/tool/onlinedev'
  },
  {
    id: 5,
    name: '调度日志',
    icon: icons.Notification,
    color: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)',
    path: '/monitor/job-log'
  },
  {
    id: 6,
    name: '服务监控',
    icon: icons.Monitor,
    color: 'linear-gradient(135deg, #30cfd0 0%, #330867 100%)',
    path: '/monitor/server'
  }
])

// 时钟数据
const time = ref({
  hours: 0,
  minutes: 0,
  seconds: 0
})

let timeInterval: number | null = null

// 更新时间
const updateTime = () => {
  const now = new Date()
  time.value.hours = now.getHours()
  time.value.minutes = now.getMinutes()
  time.value.seconds = now.getSeconds()
}

// 格式化数字为两位
const formatNumber = (num: number) => {
  return num.toString().padStart(2, '0')
}

// 工作图片路径
const workImageUrl = computed(() => {
  // 使用相对路径或者绝对路径
  return new URL('@/assets/work.svg', import.meta.url).href
})

// 图表相关
const lineChartRef = ref<HTMLElement>()
const lineChart = shallowRef<echarts.ECharts | null>(null)

// 折线图配置
const getLineChartOption = (): EChartsOption => ({
  tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(255, 255, 255, 0.9)',
    borderColor: '#ddd',
    borderWidth: 1,
    textStyle: {
      color: '#333'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    axisLine: {
      lineStyle: {
        color: '#ddd'
      }
    },
    axisLabel: {
      color: '#666'
    }
  },
  yAxis: {
    type: 'value',
    axisLine: {
      lineStyle: {
        color: '#ddd'
      }
    },
    axisLabel: {
      color: '#666'
    },
    splitLine: {
      lineStyle: {
        color: '#f0f0f0'
      }
    }
  },
  series: [
    {
      name: '访问量',
      type: 'line',
      smooth: true,
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: 'rgba(64, 158, 255, 0.3)' },
            { offset: 1, color: 'rgba(64, 158, 255, 0.05)' }
          ]
        }
      },
      itemStyle: {
        color: '#409EFF'
      },
      lineStyle: {
        width: 3,
        shadowColor: 'rgba(64, 158, 255, 0.5)',
        shadowBlur: 10,
        shadowOffsetY: 5
      }
    },
    {
      name: '浏览量',
      type: 'line',
      smooth: true,
      data: [620, 732, 701, 734, 1090, 1130, 1120],
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: 'rgba(103, 194, 58, 0.3)' },
            { offset: 1, color: 'rgba(103, 194, 58, 0.05)' }
          ]
        }
      },
      itemStyle: {
        color: '#67C23A'
      },
      lineStyle: {
        width: 3,
        shadowColor: 'rgba(103, 194, 58, 0.5)',
        shadowBlur: 10,
        shadowOffsetY: 5
      }
    }
  ]
})

// 初始化图表
const initCharts = () => {
  if (lineChartRef.value) {
    lineChart.value = echarts.init(lineChartRef.value)
    lineChart.value.setOption(getLineChartOption())
  }
}

// 处理窗口大小变化
const handleResize = () => {
  lineChart.value?.resize()
}

// 快捷导航点击
const handleNavClick = (nav: any) => {
  console.log('导航到:', nav.path)
  router.push(nav.path)
}

onMounted(() => {
  // 初始化时间
  updateTime()
  timeInterval = window.setInterval(updateTime, 1000)

  nextTick(() => {
    initCharts()
  })
  window.addEventListener('resize', handleResize)

    const script = document.createElement('script')
    script.src = 'https://gitee.com/luckyboyguo/Smart-Admin-Fast/widget_preview'
    script.async = true
    script.defer = true
    document.body.appendChild(script)
})

onUnmounted(() => {
  if (timeInterval) {
    clearInterval(timeInterval)
  }
  window.removeEventListener('resize', handleResize)
  lineChart.value?.dispose()
})
</script>

<style scoped lang="scss">
.dashboard-container {
  padding: 20px;
  background: v-bind('settingsStore.theme === "dark" ? "linear-gradient(to bottom, #0a0a0a 0%, #1a1a1a 100%)" : "linear-gradient(to bottom, #f5f7fa 0%, #ffffff 100%)"');
  min-height: 100vh;
}

/* 顶部统计卡片 */
.stats-row {
  margin-bottom: 20px;
}

.data-card {
  animation: slideUp 0.6s ease-out forwards;
  opacity: 0;
  transform: translateY(30px);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
  }
}

@keyframes slideUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card-content {
  display: flex;
  align-items: center;
  gap: 20px;
}

.icon-wrapper {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    transform: translateX(-100%) rotate(45deg);
    transition: transform 0.6s ease;
  }

  &:hover::before {
    transform: translateX(100%) rotate(45deg);
  }

  &:hover {
    transform: scale(1.1) rotate(5deg);
  }

  .el-icon {
    font-size: 30px;
    color: #fff;
    z-index: 1;
  }

  &.primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  }

  &.success {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
  }

  &.warning {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
  }

  &.info {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  }
}

.data-wrapper {
  flex: 1;
}

.card-value {
  font-size: 32px;
  font-weight: bold;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
  margin-bottom: 8px;
}

.card-title {
  font-size: 14px;
  color: var(--el-text-color-regular);
}

/* 主内容区 */
.main-content {
  display: flex;
  align-items: flex-start;
}

.left-content,
.right-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.section-card {
  border-radius: 12px;
  overflow: hidden;
  animation: fadeInUp 0.6s ease-out;

  &:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: bold;
  color: var(--el-text-color-primary);
}

.header-icon {
  font-size: 18px;
  color: v-bind('settingsStore.themeColor');
}

/* 项目展示 */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.project-item {
  border-radius: 12px;
  overflow: hidden;
  background: var(--el-bg-color);
  border: 1px solid var(--el-border-color);
  transition: all 0.3s ease;
  animation: scaleIn 0.5s ease-out;
  cursor: pointer;

  &:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
    border-color: v-bind('settingsStore.themeColor');

    .project-cover img {
      transform: scale(1.1);
    }

    .project-overlay {
      opacity: 1;
    }
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.project-cover {
  position: relative;
  width: 100%;
  height: 160px;
  overflow: hidden;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
  }
}

.project-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.project-info {
  padding: 16px;
}

.project-name {
  font-size: 16px;
  font-weight: bold;
  color: var(--el-text-color-primary);
  margin: 0 0 8px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-desc {
  font-size: 13px;
  color: var(--el-text-color-regular);
  margin: 0 0 12px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--el-text-color-secondary);

  .meta-item {
    display: flex;
    align-items: center;
    gap: 6px;

    &.time {
      color: var(--el-text-color-regular);
    }
  }
}

/* 最新动态 */
.activity-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  background: var(--el-fill-color-light);
  transition: all 0.3s ease;
  animation: slideInRight 0.5s ease-out;

  &:hover {
    background: v-bind('settingsStore.theme === "dark" ? "var(--el-fill-color)" : "#ecf5ff"');
    transform: translateX(8px);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.activity-avatar {
  flex-shrink: 0;
}

.activity-content {
  flex: 1;
  min-width: 0;
}

.activity-text {
  font-size: 14px;
  color: var(--el-text-color-primary);
  margin-bottom: 4px;
  line-height: 1.5;
}

.activity-time {
  font-size: 12px;
  color: var(--el-text-color-secondary);
}

/* 快捷导航 */
.quick-nav-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px;
  border-radius: 12px;
  background: var(--el-fill-color-light);
  cursor: pointer;
  transition: all 0.3s ease;
  animation: bounceIn 0.6s ease-out;

  &:hover {
    background: var(--el-bg-color);
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);

    .nav-icon {
      transform: rotateY(180deg);
    }
  }
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

.nav-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.6s ease;

  .el-icon {
    font-size: 24px;
    color: #fff;
  }
}

.nav-name {
  font-size: 14px;
  color: var(--el-text-color-primary);
  font-weight: 500;
}

/* 翻页时钟 */
.clock-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  overflow: visible !important;

  :deep(.el-card__body) {
    padding: 30px 20px;
  }
}

.flip-clock {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.clock-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.flip-number {
  width: 70px;
  height: 80px;
  background: linear-gradient(to bottom, #2d3748 0%, #1a202c 100%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  font-weight: bold;
  color: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3),
              inset 0 2px 4px rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #1a202c;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  }

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, transparent 100%);
    pointer-events: none;
  }
}

.flip-animation {
  animation: flipScale 0.6s ease-in-out;
}

@keyframes flipScale {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(0.95) rotateX(10deg);
  }
  50% {
    transform: scale(1.05) rotateX(-10deg);
  }
  75% {
    transform: scale(0.98);
  }
  100% {
    transform: scale(1);
  }
}

.clock-separator {
  font-size: 48px;
  font-weight: bold;
  color: #fff;
  animation: blink 1s ease-in-out infinite;
  margin: 0 5px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

.clock-label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 努力工作 */
.work-card {
  padding: 0;

  :deep(.el-card__body) {
    padding: 0;
  }
}

.work-image {
  width: 100%;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: linear-gradient(135deg, #667eea22 0%, #764ba222 100%);
  animation: float 3s ease-in-out infinite;
  overflow: hidden;

  img {
    width: 100%;
    max-width: 300px;
    height: auto;
    position: relative;
    z-index: 1;
  }
}

.floating-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.particle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  opacity: 0;
  animation: particleFloat 4s ease-in-out infinite;

  &:nth-child(1) {
    left: 10%;
    animation-delay: 0s;
  }

  &:nth-child(2) {
    left: 30%;
    animation-delay: 0.5s;
  }

  &:nth-child(3) {
    left: 50%;
    animation-delay: 1s;
  }

  &:nth-child(4) {
    left: 70%;
    animation-delay: 1.5s;
  }

  &:nth-child(5) {
    left: 20%;
    animation-delay: 2s;
  }

  &:nth-child(6) {
    left: 85%;
    animation-delay: 2.5s;
  }
}

@keyframes particleFloat {
  0% {
    bottom: 0;
    opacity: 0;
    transform: translateX(0) scale(0);
  }
  25% {
    opacity: 1;
    transform: translateX(20px) scale(1);
  }
  75% {
    opacity: 0.8;
    transform: translateX(-10px) scale(1.2);
  }
  100% {
    bottom: 100%;
    opacity: 0;
    transform: translateX(0) scale(0);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* 访问统计 */
.chart-card {
  .chart {
    height: 300px;
    width: 100%;
  }
}

/* 响应式布局 */
@media (max-width: 1200px) {
  .project-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .quick-nav-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .dashboard-container {
    padding: 10px;
  }

  .project-grid {
    grid-template-columns: 1fr;
  }

  .quick-nav-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .left-content,
  .right-content {
    gap: 10px;
  }

  .stats-row {
    margin-bottom: 10px;
  }

  .flip-number {
    width: 50px;
    height: 60px;
    font-size: 28px;
  }

  .clock-separator {
    font-size: 32px;
  }

  .clock-label {
    font-size: 12px;
  }
}
.osc_pro_color {color: #4183c4 !important;}
.osc_panel_color {background-color: #ffffff !important;}
.osc_background_color {background-color: #ffffff !important;}
.osc_border_color {border-color: #e3e9ed !important;}
.osc_desc_color {color: #666666 !important;}
.osc_link_color * {color: #9b9b9b !important;}
</style>
